<template>
  <div class="resume">
    <div class="resume-hd">
      <ul>
        <li>{{activeYear}}</li>
        <li>{{topCounties}}</li>
        <li>{{bottomCounties}}</li>
        <li>{{yearmeanNpp}}gC/m²</li>
      </ul>
    </div>
    <div class="resume-bd">
      <ul>
        <li>年份</li>
        <li>高值区</li>
        <li>危险区</li>
        <li>年均NPP</li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name:"TopInfo",
  props:["activeYear","yearmeanNpp"],
  data() {
    return {
      ndata: [],
      topCounties:0,
      bottomCounties:0,
      // i:0
    };
  },
  mounted() {
    this.getData()
    // this.startInterval()
    window.addEventListener("resize", this.screenAdapter);
  },
  beforeDestroy() {
    this.$bus.$off("chartdata");
    //清除定时器
    clearInterval(this.intervalID);
    //组件销毁时移除事件
    window.removeEventListener("resize", this.screenAdapter);
  },
  methods: {
    getData() {
      return new Promise((resolve) => {
        this.$bus.$on("chartdata", (res) => {
          this.ndata = res;
          // console.log(this.ndata);
          resolve(res);   
          this.getareas()                
        });
      });
    },
    //获取风险区与安全区
    getareas(){
      let high = 0
      let low = 0
      // console.log(this.ndata);
      this.ndata.forEach(item => {
        if(item.npp_mean){
          if(item.npp_mean > 800) high++
          else if(item.npp_mean < 600) low++
        }
        
      })    
      this.topCounties = high
      this.bottomCounties = low
      
    },
  },
};
</script>

<style>
.resume {
  width: 100%;
  height: 100%;
  background: rgba(101, 132, 226, 0.1);
  padding: 5px;
}
.resume .resume-hd {
  position: relative;
  border: 1px solid rgba(25, 186, 139, 0.17);
}
.resume .resume-hd ul {
  display: flex;
}
.resume .resume-hd ul li {
  position: relative;
  flex: 1;
  list-style: none;
  text-align: center;
  height: 46px;
  line-height: 46px;
  font-size: 16px;
  color: #ffeb7b;
  padding: 4px 0;
  font-family: "DIGITALDREAMFAT";
  font-weight: bold;
}
.resume .resume-hd ul li:nth-child(2)::after,
.resume .resume-hd ul li:nth-child(2)::before {
  content: "";
  position: absolute;
  height: 50%;
  width: 1px;
  background: rgba(255, 255, 255, 0.2);
  top: 25%;
}
.resume .resume-hd ul li:nth-child(2)::after {
  right: 0;
}
.resume .resume-hd ul li:nth-child(2)::before {
  left: 0;
}
.resume .resume-hd ul li:nth-child(3)::after {
  content: "";
  position: absolute;
  height: 50%;
  width: 1px;
  background: rgba(255, 255, 255, 0.2);
  top: 25%;
}
.resume .resume-hd ul li:nth-child(3)::after {
  right: 0;
}

.resume .resume-hd::before {
  content: "";
  position: absolute;
  width: 30px;
  height: 10px;
  border-top: 2px solid #02a6b5;
  border-left: 2px solid #02a6b5;
  top: 0;
  left: 0;
}
.resume .resume-hd::after {
  content: "";
  position: absolute;
  width: 30px;
  height: 10px;
  border-bottom: 2px solid #02a6b5;
  border-right: 2px solid #02a6b5;
  right: 0;
  bottom: 0;
}
.resume .resume-bd ul {
  display: flex;
}
.resume .resume-bd ul li {
  list-style: none;
  flex: 1;
  height: 30px;
  line-height: 30px;
  text-align: center;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  padding-top: 10px;
}
</style>